<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }

        function drawDimensionLine(ctx, x1, y, x2, y, label) {
            ctx.save();
            ctx.lineWidth = 1;
            // Main horizontal line
            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            ctx.stroke();
            // Arrow heads
            drawArrow(ctx, x1 + 10, y, x1, y, 8);
            drawArrow(ctx, x2 - 10, y, x2, y, 8);
            // Vertical ticks
            ctx.beginPath();
            ctx.moveTo(x1, y - 5);
            ctx.lineTo(x1, y + 5);
            ctx.moveTo(x2, y - 5);
            ctx.lineTo(x2, y + 5);
            ctx.stroke();
            // Label
            ctx.font = 'italic 20px Times New Roman';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(label, (x1 + x2) / 2, y + 15);
            ctx.restore();
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            
            // Draw Magnetic Field (B)
            ctx.font = '30px Times New Roman';
            ctx.fillStyle = '#333';
            const spacingX = 65;
            const spacingY = 65;
            for (let x = 30; x < canvas.width - 30; x += spacingX) {
                for (let y = 30; y < canvas.height - 70; y += spacingY) {
                    ctx.fillText('×', x, y);
                }
            }
            
            // Define parameters and coordinates
            const l = 130;
            const R = 80;
            const h = 90;
            const cx = 220;
            const cy = 250;

            const ax = cx - l;
            const ay = cy;
            const bx = cx;
            const by = cy - h;
            const Ox = cx + R;
            const Oy = cy;
            const dx = cx + 2 * R;
            const dy = cy;

            // Draw horizontal dashed axis line
            ctx.save();
            ctx.strokeStyle = '#555';
            ctx.lineWidth = 1;
            ctx.setLineDash([4, 4]);
            ctx.beginPath();
            ctx.moveTo(ax - 20, cy);
            ctx.lineTo(dx + 20, cy);
            ctx.stroke();
            ctx.restore();

            // Draw the wire
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2.5;
            ctx.beginPath();
            ctx.moveTo(ax, ay);
            ctx.lineTo(bx, by);
            ctx.lineTo(cx, cy);
            ctx.stroke(); 
            ctx.beginPath(); 
            ctx.moveTo(cx, cy);
            ctx.arc(Ox, Oy, R, Math.PI, 0, false); // Bottom semi-circle, clockwise
            ctx.stroke();

            // Draw arrows on the wire for current I
            ctx.save();
            ctx.lineWidth = 2;
            // Arrow on ab
            const mid_ab_x = ax + (bx - ax) * 0.7;
            const mid_ab_y = ay + (by - ay) * 0.7;
            drawArrow(ctx, mid_ab_x - (bx-ax)*0.05, mid_ab_y - (by-ay)*0.05, mid_ab_x, mid_ab_y, 10);
            
            // Arrow on bc
            drawArrow(ctx, bx, by + h * 0.5, cx, cy - h*0.5, 10);
            
            // Arrow on cd (arc)
            const arrowAngle = 1.4 * Math.PI; // Position on the arc
            const tangentAngle = arrowAngle + Math.PI / 2; // Tangent angle for CCW circle
            const fromX = Ox + R * Math.cos(arrowAngle) - 5 * Math.cos(tangentAngle);
            const fromY = Oy + R * Math.sin(arrowAngle) - 5 * Math.sin(tangentAngle);
            const toX = Ox + R * Math.cos(arrowAngle) + 5 * Math.cos(tangentAngle);
            const toY = Oy + R * Math.sin(arrowAngle) + 5 * Math.sin(tangentAngle);
            drawArrow(ctx, fromX, fromY, toX, toY, 10);
            ctx.restore();


            // Draw labels and dimension lines
            ctx.fillStyle = 'black';
            ctx.font = '20px Times New Roman';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // Points a, b, c, d
            ctx.fillText('a', ax - 15, ay + 3);
            ctx.fillText('b', bx + 15, by - 5);
            ctx.fillText('c', cx - 12, cy + 12);
            ctx.fillText('d', dx + 12, dy + 3);
            
            // Point O
            ctx.beginPath();
            ctx.arc(Ox, Oy, 3.5, 0, 2 * Math.PI);
            ctx.fill();
            ctx.fillText('O', Ox, Oy - 15);

            // Label B
            ctx.font = 'italic bold 24px Times New Roman';
            ctx.fillText('B', canvas.width - 80, 50);

            // Label I
            ctx.save();
            ctx.font = 'italic 22px Times New Roman';
            const I_pos_x = ax + (bx-ax)*0.4;
            const I_pos_y = ay + (by-ay)*0.4;
            ctx.translate(I_pos_x, I_pos_y);
            ctx.rotate(Math.atan2(by - ay, bx - ax));
            ctx.fillText('I', 0, -15);
            ctx.restore();

            // Dimension l
            drawDimensionLine(ctx, ax, cy + 50, cx, cy + 50, 'l');

            // Dimension R
            ctx.save();
            ctx.lineWidth = 1;
            const R_angle = 1.6 * Math.PI;
            const Rx = Ox + R * Math.cos(R_angle);
            const Ry = Oy + R * Math.sin(R_angle);
            ctx.beginPath();
            ctx.moveTo(Ox, Oy);
            ctx.lineTo(Rx, Ry);
            ctx.stroke();
            drawArrow(ctx, Ox, Oy, Rx, Ry, 10);
            ctx.font = 'italic 20px Times New Roman';
            ctx.fillText('R', Ox - R*0.4, Oy + R*0.4);
            ctx.restore();
            
            // Bottom text "题 5 图"
            ctx.font = '24px SimHei'; 
            ctx.textAlign = 'center';
            ctx.fillText('题 5 图', canvas.width / 2, canvas.height - 30);
        }
        
        draw();
    </script>
</body>
</html>